<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录界面</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/vue.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/vue-resource.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui.css" id="layui">
    <Link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/main.css">
    <script src="${pageContext.request.contextPath}/layui.js"></script>
    <script src="${pageContext.request.contextPath}/lay/modules/laydate.js"></script>

    <style type="text/css">
        .title {
            text-align: center;
            font-size: 20px;
            padding-top: 30px;
        }

        .window {
            width: 400px;
            position: absolute;
            margin-left: -200px;
            margin-top: -80px;
            left: 50%;
            top: 30%;
            display: block;
            z-index: 100;
            background: white;
            padding: 20px;
        }
    </style>
</head>

<body style="background: #f1f1f1">

<div class="window">
    <div class="title">
        登录界面
    </div>
    <form class="layui-form" method="post">
        <div class="layui-form-item" style="margin-top: 20px;text-align: center">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="userName" required lay-verify="required" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;text-align: center">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="userPassword" required lay-verify="required"
                       placeholder="请输密码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;text-align: center" id="authBox">
            <label class="layui-form-label">权限模式：</label>
            <div class="layui-input-block">
                <select name="auth" id="auth" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="注册用户">注册用户</option>
                    <option value="管理员">管理员</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;text-align: center" id="regBox">
            <div style="text-align: right">
               我要&nbsp;<a href="javascript:reg()" style="color: #00F7DE">注册</a>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;text-align: center">
            <div style="text-align: center">
                <button type="button" id="loginBtn" onclick="login()" class="layui-btn">&nbsp;&nbsp;登录&nbsp;&nbsp;
                </button>
                <button type="button" id="regBtn" onclick="register()" class="layui-btn" style="display: none">&nbsp;&nbsp;注册&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>

</div>

<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer'], function () {
        window.$ = layui.$;
        layer = layui.layer;
    })

    /**
     * 登录方法
     */
    function login() {
        var name = $('#name').val();
        var password = $('#password').val();
        var auth = $('#auth').val();
        if (name == null || name == '') {
            alert("用户名不能为空！！！")
            return;
        }
        if (password == null || password == '') {
            alert("用户密码不能为空！！！")
            return;
        }
        if (auth == '') {
            alert("用户权限不能为空！！！")
            return;
        }

        $.post('${pageContext.request.contextPath}/users/login.do', {
            name: name,
            password: password,
            auth: auth
        }, function (data) {
            if (data.code < 0) {
                alert(data.errMsg);
            } else if (data.code == 1) {
                location.href = "${pageContext.request.contextPath}/front/index.do";
            } else {
                location.href = "${pageContext.request.contextPath}/#/";
            }
        }, "json");
    }

    /**
     * 显示注册
     */
    function reg() {
        $(".title").html("注册页面");
        $("#authBox").hide();
        $("#regBox").hide();
        $("#loginBtn").hide();
        $("#regBtn").show();
    }

    /**
     * 完善注册功能
     */
    function register() {
        var name = $('#name').val();
        var password = $('#password').val();
        // alert(name+password)
        $.post('${pageContext.request.contextPath}/users/register.do', {
            name: name,
            password: password,
        }, function (data) {
            if (data.code < 0) {
                alert(data.errMsg);
            } else {
                location.href = "${pageContext.request.contextPath}/front/login.jsp";
            }
        }, "json");
    }

</script>
</body>


</html>